<script setup lang="ts">
import CollectionRangeChart from "~/contentScripts/views/tao/shopCategory/collectionRangeChart.vue";
import MonthSaleRangeChart from "~/contentScripts/views/tao/shopCategory/monthSaleRangeChart.vue";
import PriceRangeChart from "~/contentScripts/views/tao/shopCategory/priceRangeChart.vue";
import {categoryData} from "../../../../logic";

const props = defineProps({
  dataSource: {
    type: Array,
    default: () => []
  },
})
const maxAmount = ref(0)
const categoryMap = ref({})
const categoryId = ref('0')
const calcCategoryMap = () => {
  const map = {
    '0': [...props.dataSource]
  }
  props.dataSource.forEach(item => {
    if (typeof item.categoryId!="undefined" && item.categoryId){
      if (typeof map[item.categoryId] === 'undefined'){
        map[item.categoryId] = []
      }
      map[item.categoryId].push(item)
    }
  })
  categoryMap.value = map
  calcMaxAmount()
}
const calcMaxAmount = () => {
  let max = 0
  categoryMap.value[categoryId.value].forEach(item => {
    if (Number(item.price) > max) {
      max = Number(item.price)
    }
  })
  maxAmount.value = max
}
onMounted(() => {
  calcCategoryMap();
})
watch(() => props.dataSource, () => {
  calcCategoryMap();
}, {deep: true})
const range = ref<Array<Number>>([]);
watch(() => categoryId.value, () => {
  calcCategoryMap();
}, {deep: true})
const changeRange = (r: Array<number>) => {
  range.value = r
}
</script>

<template>
  <a-row>
    <a-col>
      类目：
      <a-select class="selection" style="width: 260px;" v-model:value="categoryId">
        <a-select-option v-for="(record,index) in categoryMap" :key="index" :value="index">
          <template v-if="index==0">全部</template>
          <template v-else>
            {{
              typeof categoryData[index] != 'undefined' ? categoryData[index].name : '--'
            }}
          </template>
        </a-select-option>
      </a-select>
    </a-col>
  </a-row>
  <a-row>
    <!-- <a-col flex="1">
      <month-sale-range-chart :data-source="categoryMap[categoryId]" :price-range="range"/>
    </a-col>
    <a-col flex="1">
      <price-range-chart :data-source="categoryMap[categoryId]" :price-range="range"/>
    </a-col> -->
    <a-col flex="1">
      <collection-range-chart :data-source="categoryMap[categoryId]" :price-range="range"/>
    </a-col>
  </a-row>
  <div style="text-align: center;">
    <price-range :max="maxAmount" @change="changeRange"/>
  </div>
</template>

<style lang="less" scoped>
.selection /deep/ .ant-select-selector {
  padding-right: 0 !important;
}
</style>
